<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="任务分配" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>
        <FlowInfoCard  :id="form.id+''" :billType="form.billType" :flowInsId="form.flowInsId">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                    </div>

                    <el-form-item label="任务标题" prop="title">
                        <el-input v-model="form.title" placeholder="请输入任务标题" />
                    </el-form-item>
                    <el-form-item label="任务内容">
                        <editor v-model="form.content" :min-height="192" :disabled="readonly"/>
                    </el-form-item>
                    <el-form-item label="责任人" prop="receiveNickName">
                        <el-row>
                            <el-col :span="9" style="padding-right: 20px">
                                <el-input style="width: 300px;height: 50px;width: 100%" v-model="form.receiveNickName" placeholder="请选择责任人" readonly>
                                    <template #suffix>
                                        <a type="primary" style="height: 45px;color: #00afff;padding: 0px 10px;" @click="openSecelctOneUser">选择</a>
                                    </template>
                                </el-input>
                            </el-col>
                            <el-col :span="15">
                                <el-alert title="责任人将收到待办任务。" type="success" :closable="false"></el-alert>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="协助人名称" prop="extNickName">
                        <el-row>
                            <el-col :span="9" style="padding-right: 20px">
                                <el-input style="width: 300px;height: 50px;width: 100%" v-model="form.extNickName" placeholder="请选择协助人" readonly>
                                    <template #suffix>
                                        <a type="primary" style="height: 45px;color: #00afff;padding: 0px 10px;" @click="openSecelctMulUser">选择</a>
                                    </template>
                                </el-input>
                            </el-col>
                            <el-col :span="15">
                                <el-alert title="协助人将收到站内信。协助人、责任人、任务发送人都可进行任务反馈" type="success" :closable="false"></el-alert>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="截止时间" prop="finishTime">
                        <el-col :span="9" style="padding-right: 20px">
                            <el-date-picker clearable v-model="form.finishTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择截止时间"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容" />
                    </el-form-item>

                </el-card>
            </el-form>
        </FlowInfoCard>

        <el-dialog :visible.sync="showSelectOneUser" title="选择负责人" width="1200px" append-to-body>
            <SelectOneUser @selectedOneUser="selectedOneUser" @closeSelectOneUser="closeSelectOneUser"></SelectOneUser>
        </el-dialog>

        <el-dialog :visible.sync="showSelectMulUser" title="选择协助人" width="1200px" append-to-body>
            <SelectMulUser @selectedMulUser="selectedMulUser" @closeSelectMulUser="closeSelectMulUser"></SelectMulUser>
        </el-dialog>
    </div>
</template>

<script>
import FormTopBar from "@/views/workflow/common/formTopBar"
import {addSendTask, getSendTask, updateSendTask} from "@/api/oa/sendTask";
import SelectOneUser from "@/views/common/selectUser/selectOneUser"
import SelectMulUser from "@/views/common/selectUser/selectMulUser"
import FlowInfoCard from "@/views/workflow/common/flowinfoCard";
export default {
    name: "SealApplyForm",
    components: {FormTopBar,SelectOneUser,SelectMulUser,FlowInfoCard},
    data() {
        return {
            showCommitDialog:false,
            commitType:"",
            showFlowInfo:false,
            taskId:'',
            readonly:false,
            //选择用户弹窗
            showSelectOneUser:false,
            showSelectMulUser:false,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 任务分配表格数据
            sendTaskList: [],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                title: [
                    {required: true, message: "任务标题不能为空", trigger: "change"}
                ],
                receiveNickName:[
                    {required: true, message: "任务责任人不能为空", trigger: "change"}
                ],
                finishTime:[
                    {required: true, message: "截止时间不能为空", trigger: "change"}
                ]
            }
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
    },
    methods: {
        //  获取单据信息
        getDetailData(id) {
            getSendTask(id).then(response => {
                this.form = response.data;
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateSendTask(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addSendTask(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: "/work/sendTask",query: {billType:this.form.billType}});
        },
        openSecelctOneUser(){
            this.showSelectOneUser = true;
        },
        openSecelctMulUser(){
            this.showSelectMulUser = true;
        },
        // 关闭选择一个用户弹窗
        closeSelectOneUser(){
            this.showSelectOneUser = false;
        },
        closeSelectMulUser(){
            this.showSelectMulUser = false;
        },
        //选择完一条用户
        selectedOneUser(user){
            console.log("选择一条用户："+JSON.stringify(user))
            this.form.receiveUserId = user.userId;
            this.form.receiveNickName = user.nickName;
            this.showSelectOneUser = false;
        },
        //选择抄送用户
        selectedMulUser(users){
            console.log("选择多条用户："+JSON.stringify(users))
            let idarr = [];
            let namearr = [];
            users.forEach(u=>{
                idarr.push(u.userId);
                namearr.push(u.nickName)
            })
            this.form.extUserId = idarr.join(",");
            this.form.extNickName = namearr.join(",");
            this.showSelectMulUser = false;
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }

    }
}
</script>
